<template>
  <div class="actions-btn-group">
    <a-button v-if="startOrDisabledBtnVisible" type="primary" @click="startOrDisabledHandle">{{
      startOrDisabledBtnText
    }}</a-button>
    <a-button v-if="stopCollectBtnVisible" type="primary" @click="handleStopCollect">停止采集</a-button>
    <CollectOperate :resource-type="resource_type" :collectId="id" :disabled="collectOperateDisabled" />
  </div>
  <ModalView
    title="提示"
    v-model:visible="modalVIsible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="disableConfirm"
    @cancel="disableCancel"
  >
    <span>{{ `确定要${startOrDisabledBtnText}该资源采集点吗？` }}</span></ModalView
  >
  <!-- 停止采集弹窗 -->
  <ModalView
    title="提示"
    v-model:visible="collectVisible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="stopConfirm"
    @cancel="stopCancel"
  >
    <span>确定要停止采集吗？</span></ModalView
  >
</template>

<script lang="ts" setup name="ActionsBtnGroup">
import CollectOperate from '../../../../components/collect-operate/index.vue'
import { ref, computed } from 'vue'
import {
  startOrDisableStatus,
  stopCollectFunc,
  setStartOrDisableRequestApi,
  modalVIsible,
  collectVisible,
  setStopCollectRequestApi
} from '../../../../public-handle'

import { selectedRowKeys } from '../../../../hooks/useTable'
import ModalView from '@/components/components/modal/ModalView.vue'
import apis from '@/apis'
import { storeToRefs } from 'pinia'
import useStore from '@/stores/index'
import { message } from 'ant-design-vue'
const { updateCollectStatusSingle, stopCollect } = apis.collectManage
const { collectManage } = useStore()
const { resource_type, status, id } = storeToRefs(collectManage)
const _id = id.value as string
const _status = status.value as number
console.log('_status: ', _status)
// 停止采集 btn
let stopCollectBtnVisible = ref<boolean>(status.value === 3)
// const stopCollectHandle = () => {
//   stopCollectFunc().then(() => {
//     stopCollectBtnVisible.value = false
//   })
// }

// 启用/禁用 btn
const startOrDisabledBtnVisible = computed(
  () => status.value === 1 || status.value === 2 || !stopCollectBtnVisible.value
)
console.log('获取status----------------------------: ', status.value)
const startOrDisabledBtnText = computed((): string => {
  if (status.value === 1) {
    return '禁用'
  }
  if (status.value === 2) {
    return '启用'
  }
  return ''
})
console.log('startOrDisabledBtnText: ', startOrDisabledBtnText.value)
//接口的状态
const statusNum = computed(() => (_status === 2 ? 1 : 2))

const startOrDisabledHandle = () => {
  setStartOrDisableRequestApi(updateCollectStatusSingle)
  console.log('当前的状态', status.value, '接口的状态', statusNum.value)
  if (status.value === 2) {
    updateCollectStatusSingle({ status: statusNum.value, id: _id }).then(() => {
      message.success('启用成功')
      modalVIsible.value = false
      collectManage.setCollect(1)
    })
    // console.log('statusNum.value, id.value11111111111111111: ', statusNum.value, id.value)
    // startOrDisableStatus(statusNum.value, id.value, '资源采集点')
  } else {
    modalVIsible.value = true
  }
}
//禁用确认
const disableConfirm = (value: any) => {
  updateCollectStatusSingle({ status: statusNum.value, id: _id }).then(() => {
    message.success('禁用成功')
    modalVIsible.value = false
    collectManage.setCollect(2)
  })
  // console.log('statusNum.value, id.value22222222222222222: ', statusNum.value, id.value)
  // startOrDisableStatus(statusNum.value, id.value, '资源采集点')
}
//禁用取消
const disableCancel = () => {
  modalVIsible.value = false
  selectedRowKeys.value = []
}
//停止
const handleStopCollect = () => {
  collectVisible.value = true
}
//停止采集确认
const stopConfirm = (value: any) => {
  setStopCollectRequestApi(stopCollect)
  stopCollectFunc(id.value).then(() => {
    stopCollectBtnVisible.value = false
  })
}
//停止采集取消
const stopCancel = () => {
  collectVisible.value = false
  selectedRowKeys.value = []
}
// 其他操作 btnDisabled
let collectOperateDisabled = computed(() => startOrDisabledBtnText.value === '启用' || stopCollectBtnVisible.value)
console.log('collectOperateDisabled: ', collectOperateDisabled)
</script>

<style lang="less" scoped>
.actions-btn-group {
  .ant-btn:not(:first-child) {
    margin-right: 10px;
  }
}
</style>
